<template>
  <el-container>
    <my-theme-card>
      <el-header>
        <my-title :title="'节点添加'" />
      </el-header>
      <el-main>

        <el-tabs v-model="currentTabPane" type="border-card">
          <el-tab-pane label="节点信息" name="1">
            <el-form ref="taskForm" :model="tempNode" label-width="130px" :rules="taskRules">
              <el-form-item label="节点名称" prop="nodename">
                <el-input v-model="tempNode.nodename" style="width:180px" />
              </el-form-item>
              <el-form-item label="节点号" prop="nodesn">
                <el-input v-model.number="tempNode.nodesn" style="width:180px" />
              </el-form-item>
              <el-form-item label="流程编号" prop="procno">
                <el-input v-model="tempNode.procno" style="width:180px" readonly @focus="chooseProcessClick" />
              </el-form-item>
              <el-form-item label="节点类型" prop="auto_submit">
                <el-select v-model="tempNode.node_type" placeholder="请选择" @change="nodeTypeChange">
                  <el-option
                    v-for="item in dir_node_type"
                    :key="item.id"
                    :label="item.label"
                    :value="item.data"
                  />
                </el-select>
              </el-form-item>
              <el-form-item v-if="tempNode.node_type ==='2' " label="JOIN节点">
                <el-input v-model="tempNode.node_join_name" style="width:180px" readonly @focus="chooseNodeClick" />
                <el-input v-model="tempNode.node_join" type="hidden" style="width:180px" readonly />
              </el-form-item>
              <el-form-item label="是否结束节点" prop="auto_submit">
                <el-select v-model="tempNode.node_end" placeholder="请选择">
                  <el-option
                    v-for="item in dir_logic"
                    :key="item.id"
                    :label="item.label"
                    :value="item.data"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="自动提交" prop="auto_submit">
                <el-select v-model="tempNode.auto_submit" placeholder="请选择">
                  <el-option
                    v-for="item in dir_logic"
                    :key="item.id"
                    :label="item.label"
                    :value="item.data"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="意见是否必须" prop="is_opinion">
                <el-select v-model="tempNode.is_opinion" placeholder="请选择">
                  <el-option
                    v-for="item in dir_logic"
                    :key="item.id"
                    :label="item.label"
                    :value="item.data"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="节点代码" prop="node_code">
                <el-input v-model="tempNode.node_code" style="width:180px" />
              </el-form-item>
            </el-form>
          </el-tab-pane>

          <el-tab-pane label="任务处理人信息" name="2">

            <el-card class="box-card" shadow="hover">
              <div slot="header" class="clearfix">
                <span>角色列表</span>
              </div>
              <div class="grid-content bg-purple">
                <el-button class="table-header-btn" type="primary" icon="el-icon-plus" size="mini" @click="chooseRolesClick">新增</el-button>
                <template>
                  <el-table :data="roles" stripe border style="width: 100%">
                    <el-table-column prop="name" label="角色名称" width="180" />
                    <el-table-column prop="code" label="角色唯一编码" />
                    <el-table-column prop="description" label="角色描述" width="180" />
                  </el-table>
                </template>
              </div>
            </el-card>
            <el-card class="box-card" style="margin-top:25px;" shadow="hover">
              <div slot="header" class="clearfix">
                <span>用户列表</span>
              </div>
              <div class="grid-content bg-purple-light">
                <el-button class="table-header-btn" type="primary" icon="el-icon-plus" size="mini" @click="chooseUsersClick">新增</el-button>
                <template>
                  <el-table :data="users" stripe border style="width: 100%">
                    <el-table-column prop="nickname" label="用户昵称" width="180" />
                    <el-table-column label="是否启用">
                      <template slot-scope="scope">
                        {{ scope.row.enabled ? '是':'否' }}
                      </template>
                    </el-table-column>
                  </el-table>
                </template>
              </div>
            </el-card>

          </el-tab-pane>

          <el-row style="text-align: center;margin-top:20px;">
            <el-button type="primary" @click="addAllTask">确 定</el-button>
            <el-button @click="cancel">取消</el-button>
          </el-row>

        </el-tabs>

      </el-main>

      <el-dialog title="角色选择" :visible.sync="dialogRolesVisible" :close-on-click-modal="false" width="75%" center append-to-body>
        <role-list @roleListClose="closeRolesDialog" />
      </el-dialog>

      <el-dialog title="流程选择" :visible.sync="dialogProcessVisible" :close-on-click-modal="false" width="75%" center :custom-class="dialog1" append-to-body>
        <process-list @processListClose="closeProcessDialog" />
      </el-dialog>

      <el-dialog title="用户选择" :visible.sync="dialogUsersVisible" :close-on-click-modal="false" width="75%" center append-to-body>
        <user-list @userListClose="closeUsersDialog" />
      </el-dialog>

      <el-dialog title="节点选择" :visible.sync="dialogNodesVisible" :close-on-click-modal="false" width="75%" center append-to-body>
        <node-list :procno="tempNode.procno" :nodeType="'3'" @confirm="closeNodesDialog" />
      </el-dialog>

    </my-theme-card>
  </el-container>
</template>
<script>
import request from '@/utils/request'
import roleList from '@/components/RoleList/index'
import processList from '@/components/ProcessList/index'
import userList from '@/components/UserList/index'
import nodeList from '@/components/NodeList/index'
import { clone } from 'lodash'
import MyThemeCard from '../../../../components/MyThemeCard/index'
export default {
  components: {
    MyThemeCard,
    processList,
    roleList,
    userList,
    nodeList
  },
  data: function() {
    return {
      dialog1: 'dialog1',
      tempNode: {},
      currentTabPane: '1',
      currentJsonDictionary: {},
      dialogRolesVisible: false,
      dialogProcessVisible: false,
      dialogUsersVisible: false,
      dialogNodesVisible: false,
      roles: [],
      users: [],
      taskRules: {
        nodename: [
          { required: true, message: '请输入节点名称', trigger: 'change' },
          { min: 1, max: 15, message: '长度在 1 到 15 个字符', trigger: 'change' }
        ],
        procno: [
          { required: true, message: '请输入流程编号', trigger: 'change' }
        ],
        auto_submit: [
          { required: true, message: '请选择是否自动提交', trigger: 'blur' }
        ],
        is_opinion: [
          { required: true, message: '请选择意见是否必须', trigger: 'blur' }
        ],
        nodesn: [
          { required: true, message: '请输入节点号', trigger: 'blur' }
        ],
        node_code: [
          { required: true, message: '请输入节点号', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    dir_logic: function() {
      return this.$store.state.directory.directory['logic']
    },
    dir_tskstat: function() {
      return this.$store.state.directory.directory['tskstat']
    },
    dir_node_type: function() {
      return this.$store.state.directory.directory['node_type']
    }
  },
  created() {
    this.directoryUpdate()
  },
  methods: {
    // 节点类型发生变更时
    nodeTypeChange: function() {
      // 如果变更为非join节点 那么清空join信息
      if (!(this.tempNode.node_type === '2')) {
        this.tempNode.node_join = ''
        this.tempNode.node_join_name = ''
      }
    },
    // 选择节点时点击事件
    chooseNodeClick: function() {
      this.dialogNodesVisible = true
    },
    // 关闭选择节点弹框
    closeNodesDialog: function(ids, objs) {
      this.tempNode.node_join = objs[0].id
      this.tempNode.node_join_name = objs[0].nodename
      this.dialogNodesVisible = false
    },
    // 添加选择点击事件
    chooseUsersClick: function() {
      this.dialogUsersVisible = true
    },
    // 添加角色点击事件
    chooseRolesClick: function() {
      this.dialogRolesVisible = true
    },
    // 关闭角色选择框时
    closeRolesDialog: function(data, objs) {
      if (objs && objs.length > 0) {
        this.roles = objs
      }
      this.dialogRolesVisible = false
    },
    // 关闭用户选择框时
    closeUsersDialog: function(data, objs) {
      if (objs && objs.length > 0) {
        this.users = objs
      }
      this.dialogUsersVisible = false
    },
    // 选择流程点击事件
    chooseProcessClick: function() {
      this.dialogProcessVisible = true
    },
    // 关闭流程选项框时
    closeProcessDialog: function(ids, objs) {
      if (objs) {
        objs.forEach((obj) => {
          this.tempNode.procno = obj.procno
        })
      }
      this.dialogProcessVisible = false
      this.tempNode = clone(this.tempNode)
    },
    // 字典更新
    directoryUpdate: function() {
      this.$store.commit('directory/setDirectory', 'logic')
      this.$store.commit('directory/setDirectory', 'tskstat')
      this.$store.commit('directory/setDirectory', 'node_type')
    },
    // 取消
    cancel: function() {
      this.$emit('toChangePage', 'list')
    },
    // 验证所有表单
    validate: function() {
      const self = this
      return new Promise(function(resolve) {
        self.$refs['taskForm'].validate((valid) => {
          if (valid) {
            resolve(true)
          } else {
            self.currentTabPane = '1'
            return false
          }
        })
      })
    },
    // 添加装备任务
    addAllTask: function() {
      // 验证表单内容后提交
      this.validate().then(valid => {
        if (valid) {
          this.$progress.start()
          request({
            url: '/task/node/addAll',
            method: 'post',
            data: {
              node: this.tempNode,
              roles: this.roles,
              users: this.users
            }
          }).then(res => {
            this.$progress.done()
            if (res.result) {
              this.cancel()
              this.$message.success(res.msg)
            } else {
              this.$message.error(res.msg)
            }
          }
          ).catch(() => {
            this.$progress.done()
          })
        }
      })
    }
  }
}
</script>
